<script setup lang="ts">
import type { IconProps } from '@iconify/vue'
import { Icon } from '@iconify/vue'
import { computed, useAttrs } from 'vue'
import { isHttpUrl } from '@/utils'
import { loadLocalIcons } from '@/styles'
loadLocalIcons()
interface Props {
  icon: IconProps['icon']
  inline?: IconProps['inline']
  rotate?: IconProps['rotate']
  flip?: IconProps['flip']
  vFlip?: IconProps['vFlip']
  hFlip?: IconProps['hFlip']
  color?: IconProps['color']
  width?: string | number
  height?: string | number
}
const props = withDefaults(defineProps<Props>(), {
  width: '1em',
  height: '1em',
  icon: 'bi:search',
})
const attrs = useAttrs()
const isClassIcon = computed(() => {
  return typeof props.icon === 'string' && props.icon.startsWith('i-')
})
const bindAttrs = computed(() => ({
  ...attrs,
  class: (attrs.class as string) || '',
  style: (attrs.style as string) || '',
}))

const iconAttrs = computed(() => {
  const infos: Record<string, any> = JSON.parse(JSON.stringify(props))
  delete infos.icon
  return {
    ...infos,
    ...bindAttrs.value,
  }
})
</script>

<template>
  <span v-if="isClassIcon" :class="icon" v-bind="bindAttrs"></span>
  <img v-if="typeof icon === 'string' && isHttpUrl(icon)" :src="icon" :width="width" :height="height" v-bind="bindAttrs" alt="" />
  <icon v-if="!isClassIcon && !(typeof icon === 'string' && isHttpUrl(icon))" :icon="icon" v-bind="iconAttrs" />
</template>

<style scoped></style>
